<template>
  <div class="inOne-pay">
    <div>
      <el-table :data="appointmentInfo[0].indent" border style="width: 100%">

        <el-table-column align="center" label="分类" width="300" prop="dragName">
        </el-table-column>

        <el-table-column align="center" label="价钱(元)" prop="price">
        </el-table-column>
      </el-table>
    </div>
    <div class="AllTotal">
      <h2>总价：{{ this.total() }}</h2>
      <el-button type="success" @click="payData()" :disabled="this.total() == 0"
        >缴费</el-button
      >
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex"
export default {
  data() {
    return {
      isactive: false,
    };
  },
  computed: {
    ...mapState({
      appointmentInfo: (state) => state.appointment.appointmentInfo,
    }),
  },
  methods: {
    payData() {
      this.$confirm("确认缴费吗？", "提示", {})
        .then(() => {
          this.$store.commit('FINISH_INDENT',0)
          this.$message({
            type: "success",
            message: "已缴费了哟",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "缴费失败",
          });
        });
    },
    total: function () {
      var total = 0;
      let form =this.appointmentInfo[0].indent
      form.forEach(function (s) {
        if (s.isactive) {
          total += s.price;
        }
      });
      return total;
    },
  },
};
</script>

<style>
.active {
  background: blue;
}
.costDetail {
  font-weight: bold;
}
.AllTotal {
  margin-top: 50px;
}
.AllTotal h2 {
  float: right;
  margin-right: 150px;
  color: #20a0ff;
  font-size: 20px;
}
</style>